<?php 
    include_custom("/views/header.php");
?>
<body>

<div id="container-developer">
  <header id="header">
    <?php 
    include_custom("/views/header_menu.php");
    ?>
    </hgroup>
  </header>
  <div id="main" role="main" class="search">
    <article class="search-content explore-apis explore-developer">
		<div class="title">
        	<span>Explore</span>
            <ul>
               	<li><a href="#" class="active">Featured</a></li>
                <li><a href="#">Popular</a></li>
                <li class="last"><a href="#">Most Recent</a></li>
            </ul>
        </div>
        <div class="nav">
        	<img src="skin/images/explore-choose.png" width="22" height="11">
        	<div class="apis categories"><a href="#">Categories</a></div>
            <div class="developer">
            	<div class="sprites-image">
                	<input type="checkbox" class="checkbox" name="list" value="yes"/>
                </div>
            	<a href="#" class="active">Developers</a>
            </div><!-- end .developer-->
        </div><!-- end .nav-->
		
        <div class="content-main">
			<?php foreach($accounts as $account): ?>
        	<div class="post">
            	<div class="right">
                    <p class="last">612<span>COMMENTS</span></p>
                    
                </div><!-- end .right-->
            	
                <div class="left">
                	<img src="skin/images/corey-33x33.png" width="33" height="33">
                    <div class="detail">
                    	<label><?php echo $account->firstname." ".$account->lastname; ?></label>
                    	<p><?php echo $account->address; ?></p>
                    </div> 
                </div><!-- end .left-->
            </div><!-- end .post-->
            <?php endforeach; ?>
            
           
            
            
            
            
           
           
            
            
           
            
            
            
           
            
            
           
            <div class="page">
                <p class="page-left">
                    <a href="#"><img src="skin/images/previous_icon.png" width="5" height="10">Previous</a>
                </p>
                
                <p class="page-mid">
                    <a href="#" class="active">1</a>
                    <a href="#">2</a>
                    <a href="#">3</a>
                    <a href="#">4</a>
                    <a href="#">5</a>
                    <a href="#">6</a>
                    <a href="#">7</a>
                    <a href="#">8</a>
                    <a href="#">9</a>
                    <a href="#">9</a>
                </p>
                
                <p class="page-right">
                    <a href="#"><img src="skin/images/next_icon.png" width="5" height="10">Next</a>
                </p>
            </div><!-- end .page-->
        </div><!-- end .content-main-->
        
        
    </article>
  </div>
  <footer> 
  	<?php
    include_custom("/views/footer.php");
?>
  </footer>
</div>
<!--! end of #container --> 

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script>window.jQuery || document.write('<script src="skin/js/libs/jquery-1.7.1.min.js"><\/script>')</script> 

<!-- scripts concatenated and minified via ant build script--> 
<script src="skin/js/plugins.js"></script> 
<script src="skin/js/script.js"></script> 
<!-- end scripts--> 

<!--[if lt IE 7 ]>
	<script src="//ajax.googleapis.com/ajax/libs/chrome-frame/1.0.2/CFInstall.min.js"></script>
	<script>window.attachEvent("onload",function(){CFInstall.check({mode:"overlay"})})</script>
<![endif]--> 
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript">
	$(document).ready(function(){	

		if (!$.browser.opera) {
    
			// select element styling
			$('select.select').each(function(){
				var title = $(this).attr('title');
				if( $('option:selected', this).val() != ''  ) title = $('option:selected',this).text();
				$(this)
					.css({'z-index':10,'opacity':0,'-khtml-appearance':'none'})
					.after('<span class="select">' + title + '</span>')
					.change(function(){
						val = $('option:selected',this).text();
						$(this).next().text(val);
						})
			});

		};
		
	});
</script> 
<script type="text/javascript" src="skin/js/jquery-ui-1.8.17.custom.min.js"></script> 
  <script>
  $(document).ready(function() {
    /*
      Progressive enhancement.  If javascript is enabled we change the body class.  Which in turn hides the checkboxes with css.
    */
    $('body').attr("class","js");
    
    /*
      Add toggle switch after each checkbox.  If checked, then toggle the switch.
    */
     $('.checkbox').after(function(){
       if ($(this).is(":checked")) {
         return "<a href='#' class='toggle2 checked'></a>";
       }else{
         return "<a href='#' class='toggle2'></a>";
       } 
     });
     
     /*
      When the toggle switch is clicked, check off / de-select the associated checkbox
     */
    $('.toggle2').click(function(e) {
       var checkboxID = $(this).attr("ref");
       var checkbox = $('#'+checkboxID);

       if (checkbox.is(":checked")) {
         checkbox.removeAttr("checked");

       }else{
         checkbox.attr("checked","true");
       }
       $(this).toggleClass("checked");

       e.preventDefault();

    });
	
  });

  </script>
</body>
</html>